<template lang="">
  <!-- <el-header></el-header> -->
  <el-main class="layout-main">
    <header class="fl">{{ lastTime }}</header>
    <slot></slot>
  </el-main>
  <!-- <el-footer></el-footer> -->
</template>
<script setup lang="ts">
const time = useTime()
const dayjs = useDayjs()
let lastTime = ref<string>(dayjs().format('YYYY-MM-DD HH:mm:ss'))
import { socket } from "~/components/socket";

const isConnected = ref(false);
const transport = ref("N/A");

if (socket.connected) {
  onConnect();
}

function onConnect() {
  isConnected.value = true;
  transport.value = socket.io.engine.transport.name;
  const config = useRuntimeConfig()
  config.public.websocket = socket
  socket.io.engine.on("upgrade", (rawTransport) => {
    transport.value = rawTransport.name;
  });
}

function onDisconnect() {
  isConnected.value = false;
  transport.value = "N/A";
}
socket.on("connect", onConnect);
socket.on("disconnect", onDisconnect);

onBeforeUnmount(() => {
  socket.off("connect", onConnect);
  socket.off("disconnect", onDisconnect);
});
socket.on("getTime", (data) => {
  time.render((a) => {
    console.info("A", data, a)
    lastTime.value = dayjs(data).format('YYYY-MM-DD HH:mm:ss')
  })
})

</script>
<style lang="scss">
.fl {
  float: left;
}
</style>